CSS in JS

? なんで使いたいんだっけ？

解決したいCSS課題

https://i.gyazo.com/3b0bbe6f334400b81aa98e8c3f90a5db.png

name被らないように、CSS Architecture 設計手法とか考えないといけない

各classに依存関係があって、読み込みに注意が必要

というか、全部読み込んでいたりする。

FLOCSSでいうと、base,layout,component,project部分を全部、全ページ読み込むみたいな

各ページごとにSSRするなら、各ページに必要なstyleだけ読み込んでほしい

依存関係いろいろあるので、削除しにくい。

Bundler挟まないとminifyされない。

CSS Custom Propertiesとかで大分楽にはなったけどね。

zero runtime CSS in JSなんでほしいんだっけ？

build/公開される時には、静的なCSSで吐いてほしい

課題

素のCSS機能は、利用ライブラリで対応されるまで使えない可能性ある。

実際に運用しているproductの場合、すぐにWeb Standardsな機能は対応ブラウザの関係で、利用出来ないので、各ライブラリの開発速度や開発Scope範囲による。

利用ライブラリの選定とemotionの選択

比較要素思考記事

わかりやすい。書き手は、Kuma UIの人